<template>
  <div id="cate">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>会议管理</el-breadcrumb-item>
      <el-breadcrumb-item>会议室管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="tab">
      <div class="rig">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="会议室名称:">
            <el-input
              v-model="formInline.metroom_name"
              placeholder="会议室名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="状态"
            prop="metroom_status"
            :label-width="formLabelWidth"
          >
            <el-select
              v-model="formInline.metroom_status"
              placeholder="请选择状态"
            >
              <el-option label="正常" value="正常"></el-option>
              <el-option label="禁用" value="禁用"></el-option>
              <el-option label="维修中" value="维修中"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="info" @click="onresize">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="hr"></div>

      <!-- 添加 -->
      <el-dialog title="添加" :visible.sync="ischangeadd">
        <el-form :model="form">
          <el-form-item
            label="会议室名称"
            :label-width="formLabelWidth"
            prop="metroom_name"
            :rules="[{ required: true }]"
          >
            <el-input v-model="form.metroom_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="标准人数"
            prop="metroom_standard"
            :label-width="formLabelWidth"
            :rules="[{ required: true }]"
          >
            <el-input
              v-model="form.metroom_standard"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="容纳人数"
            prop="metroom_capacity"
            :label-width="formLabelWidth"
            :rules="[{ required: true }]"
          >
            <el-input
              v-model="form.metroom_capacity"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="状态"
            prop="metroom_status"
            :label-width="formLabelWidth"
            :rules="[{ required: true }]"
          >
            <el-select
              v-model="form.metroom_status"
              placeholder="请选择会议室状态"
            >
              <el-option label="正常" value="正常"></el-option>
              <el-option label="禁用" value="禁用"></el-option>
              <el-option label="维修中" value="维修中"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="投影仪"
            prop="metroom_tyy"
            :label-width="formLabelWidth"
          >
            <el-select v-model="form.metroom_tyy" placeholder="请选择话筒">
              <el-option label="投影仪1" value="1"></el-option>
              <el-option label="投影仪2" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="幕布"
            prop="metroom_mb"
            :label-width="formLabelWidth"
          >
            <el-select v-model="form.metroom_mb" placeholder="请选择话筒">
              <el-option label="幕布1" value="8"></el-option>
              <el-option label="幕布2" value="9"></el-option>
              <el-option label="幕布3" value="10"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="话筒"
            prop="metroom_ht"
            :label-width="formLabelWidth"
          >
            <el-select v-model="form.metroom_ht" placeholder="请选择话筒">
              <el-option label="话筒1" value="4"></el-option>
              <el-option label="话筒2" value="5"></el-option>
              <el-option label="话筒3" value="6"></el-option>
              <el-option label="话筒4" value="7"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="ischangeadd = false">取 消</el-button>
          <el-button type="primary" @click="onaddok">确 定</el-button>
        </div>
      </el-dialog>
      <div id="tab_main">
        <!-- 表格 -->
        <el-button type="primary" @click="handleAdd" class="addbtn"
          >新增</el-button
        >
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="metroom_name" label="会议室名称" width="180">
          </el-table-column>
          <el-table-column prop="metroom_standard" label="标准人数" width="180">
          </el-table-column>
          <el-table-column prop="metroom_capacity" label="容纳人数">
          </el-table-column>
          <el-table-column prop="metroom_status" label="状态">
          </el-table-column>
          <el-table-column prop="tyy" label="投影仪"> </el-table-column>
          <el-table-column prop="mb" label="幕布"> </el-table-column>
          <el-table-column prop="ht" label="话筒"> </el-table-column>
          <el-table-column label="操作" width="100%">
            <template slot-scope="scope">
              <!-- 两个参数用于获取当前行的值 -->
              <!-- <el-button
                @click="handleLook(scope.row)"
                type="primary"
                size="small"
                >查看</el-button
              > -->
              <el-button
                @click="handleChange(scope.row)"
                size="small"
                type="warning"
                >编辑</el-button
              >
              <!-- <el-button
                @click="handleDel(scope.row)"
                type="danger"
                size="small"
                >删除</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 查看 -->
        <!-- <el-dialog title="会议信息" :visible.sync="ischangelook">
          <el-table :data="form">
            <el-table-column
              property="date"
              label="日期"
              width="150"
            ></el-table-column>
            <el-table-column
              property="name"
              label="姓名"
              width="200"
            ></el-table-column>
          </el-table>
        </el-dialog> -->
        <!-- 编辑 -->
        <el-dialog title="编辑" :visible.sync="ischangeditor">
          <el-form :model="form">
            <el-form-item
              label="会议室名称"
              :label-width="formLabelWidth"
              prop="metroom_name"
            >
              <el-input
                v-model="form.metroom_name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="标准人数"
              prop="metroom_standard"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="form.metroom_standard"
                autocomplete="off"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item
              label="容纳人数"
              prop="metroom_capacity"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="form.metroom_capacity"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="投影仪"
              prop="metroom_tyy"
              :label-width="formLabelWidth"
            >
              <el-select v-model="form.metroom_tyy" placeholder="请选择话筒">
                <el-option label="投影仪1" value="1"></el-option>
                <el-option label="投影仪2" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="幕布"
              prop="metroom_mb"
              :label-width="formLabelWidth"
            >
              <el-select v-model="form.metroom_mb" placeholder="请选择话筒">
                <el-option label="幕布1" value="8"></el-option>
                <el-option label="幕布2" value="9"></el-option>
                <el-option label="幕布3" value="10"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="话筒"
              prop="metroom_ht"
              :label-width="formLabelWidth"
            >
              <el-select v-model="form.metroom_ht" placeholder="请选择话筒">
                <el-option label="话筒1" value="4"></el-option>
                <el-option label="话筒2" value="5"></el-option>
                <el-option label="话筒3" value="6"></el-option>
                <el-option label="话筒4" value="7"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="状态"
              prop="metroom_status"
              :label-width="formLabelWidth"
            >
              <el-select v-model="form.metroom_status" placeholder="请选择状态">
                <el-option label="正常" value="正常"></el-option>
                <el-option label="禁用" value="禁用"></el-option>
                <el-option label="维修中" value="维修中"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="ischangeditor = false">取 消</el-button>
            <el-button type="primary" @click="onchangeok">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 分页 -->

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="pagechange"
          :current-page="1"
          :page-sizes="[5, 10]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formInline: {
        metroom_name: "",
        metroom_status: "",
      },

      search: [],
      totalData: [],
      ischangeditor: false,
      ischangeadd: false,
      // ischangelook: false,
      form: {},
      formLabelWidth: "120px",
      page: 1,
      count: 5,
    };
  },
  methods: {
    // 查询
    onSubmit() {
      this.page = 1;
      this.search = Object.entries(this.formInline);
      console.log(this.search);
    },
    // 重置按钮
    onresize() {
      this.page = 1;
      this.getuser();
      this.search = "";
      this.formInline = {
        metroom_name: "",
        metroom_status: "",
      };
    },
    // 新增按钮
    handleAdd() {
      console.log(this.totalData[0]);
      this.form = this.totalData[0];
      this.ischangeadd = true;
    },
    // 点击查看按钮
    // handleLook(data) {
    //   this.ischangelook = true;
    // },
    // 点击编辑按钮
    handleChange(data) {
      this.form = data;
      this.ischangeditor = true;
    },
    //  确定修改
    onchangeok() {
      this.ischangeditor = false;
      this.$axios({
        url: "/meetmanagement/meetingroom/edi",
        method: "post",
        data: this.form,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.getuser();
        }
      });
    },
    // 确定添加
    onaddok() {
      this.ischangeadd = false;
      console.log(this.form);
      this.$axios({
        url: "/meetmanagement/meetingroom/add",
        method: "post",
        data: this.form,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          // 需要更新数据
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getuser();
        }
      });
    },
    // 点击删除按钮
    handleDel(data) {
      //   this.$confirm("确定要删除吗", {
      //     showCancelButton: true,
      //   })
      //     .then(() => {
      //       this.$axios({
      //         url: "/admin/deladmin",
      //         method: "post",
      //         data: {
      //           id: data.id,
      //         },
      //       }).then((res) => {
      //         console.log(res);
      //         if (res.data.code == 200) {
      //           // 需要更新数据
      //           this.getuser();
      //         }
      //       });
      //     })
      //     .catch((action) => {});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.count = val;
    },
    // 当前页
    pagechange(n) {
      this.page = n;
    },
    // 获取数据
    getuser() {
      this.$axios({
        url: "/meetmanagement/meetingroom/get",
      }).then((res) => {
        // console.log(res);
        // 将获取到的数据放在数组中
        this.totalData = res.data.data;
      });
    },
  },
  // 渲染的请求要么写在created要么写在mounted里面
  created: function () {
    this.getuser();
  },
  // 对得到的数据进行监听，进行分页计算
  computed: {
    total: function () {
      if (this.search.length != 0) {
        for (let i = 0; i < this.search.length; i++) {
          let arr2 = this.totalData.filter((v) => {
            if (String(v[this.search[i][0]]).indexOf(this.search[i][1]) != -1) {
              return v;
            }
          });
          return arr2.length;
        }
      } else {
        return this.totalData.length;
      }
    },
    tableData: function () {
      let arr = this.totalData;
      let arr3 = [];
      let a = 0;
      let b = 0;
      // 第一个条件筛选完，结果拿来筛选第二个条件，没有满足条件的就返回原数组
      if (this.search.length != 0) {
        for (let i = 0; i < this.search.length; i++) {
          // 比较,search的Vlaue值在arr，search的key的value值中找得到
          this.search[i][1] != "" ? b++ : (b = b + 0);
          for (let j = 0; j < arr.length; j++) {
            String(arr[j][this.search[i][0]]).indexOf(this.search[i][1]) != -1
              ? arr3.push(arr[j])
              : "";
          }
          if (i == a) {
            a++;
            arr.splice(0, arr.length);
            for (let k = 0; k < arr3.length; k++) {
              arr[k] = arr3[k];
            }
            arr3.splice(0, arr3.length);
          }
        }
        // 有两个条件，但是，不满足是都满足条件
        b != a && b == this.search.length ? arr.splice(0, arr.length) : "";
        return arr.slice((this.page - 1) * this.count, this.page * this.count);
      } else {
        return this.totalData.slice(
          (this.page - 1) * this.count,
          this.page * this.count
        );
      }
    },
  },
};
</script>
<style lang="less">
#cate {
  #tab {
    background-color: #ffffff;
    padding: 20px 20px;
    #tab_main {
      .addbtn {
        float: left;
        margin-bottom: 20px;
      }
    }
  }
  .hr {
    height: 2px;
    width: 100%;
    background-color: #f2f2f2;
    margin-bottom: 20px;
  }
  .rig {
    text-align: left;
    .el-form-item {
      margin-right: 20px;
    }
    .el-form-item__label {
      float: left;
    }
    .el-form-item:nth-of-type(1) {
      margin-right: 30px;
    }
    // .el-form-item:nth-of-type(4) {
    //   // float: right;
    // }
    // .el-form-item:nth-of-type(3) {
    //   // float: right;
    // }
    .line {
      text-align: center;
    }
  }
  .el-breadcrumb {
    margin-bottom: 20px;
  }
  .block {
    margin-top: 30px;
    text-align: right;
  }
}
</style>